<template>
    <div class="timer">
        <!-- 倒计时组件 -->
        <el-progress type="circle" :percentage="percentage" :width="80" :format="format"></el-progress>
    </div>
</template>

<script>
import { mapState } from "vuex";
import { clearInterval } from "timers";
export default {
  data() {
    return {
      timerTxt: "00:00",
      percentage: 100
    };
  },
  methods: {
    format() {
      return this.timerTxt;
    },
    start() {
      //   let totalSeconds = this.totalTime * 60;
    //   let totalSeconds = this.totalTime-5;
    //   let leftSeconds = totalSeconds;
    //   // console.log(totalSeconds)
    //   const interval = setInterval(() => {
    //     console.log(totalSeconds);
    //     let min = Math.floor(leftSeconds / 60);
    //     let sec = leftSeconds % 60;
    //     // console.log(this.fill0(min) + ":" + this.fill0(sec));
    //     this.timerTxt = this.fill0(min) + ":" + this.fill0(sec);
    //     this.percentage = leftSeconds / totalSeconds * 100;
    //     // console.log(this.percentage);

    //     if (leftSeconds == 0) {
    //       // console.log(111)
    //       clearInterval(interval);
    //     //   this.$alert(
    //     //     `<strong>考试时间到</strong><div>用时：${this.totalTime}</div><div>分数：？？</div>`,
    //     //     "提示",
    //     //     {
    //     //       dangerouslyUseHTMLString: true,
    //     //       confirmButtonText: "确定",
    //     //     }
    //     //   );
    //     }
    //     leftSeconds--;
    //   }, 1000);
    },
    fill0(num) {
      return num < 10 ? "0" + num : num;
    }
  },
  mounted() {
    this.start();
  },
  computed: {
    ...mapState("study", ["totalTime"])
  }
};
</script>

<style scoped>
.question .checkbox-group .el-checkbox {
  display: inline-block;
}

.timer {
  margin-top: 20px;
  float: right;
}
</style>